import React from 'react';
import {
    View,
    ListView,
    TouchableOpacity,
    StyleSheet,
    Text,
    ScrollView,
    RefreshControl,
    Navigator
} from 'react-native';
import NavigationBar from './NavigationBar'
import Properties from './config/properties'
import * as requestService from './service/request'

import BillDetaill from './BillDetaill';
import BillCreate from './BillCreate';

export default class BillList extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            isRefreshing: false,
            loaded: false,
            dataSource: new ListView.DataSource({
                rowHasChanged: (r1, r2) => r1 !== r2,
            }),
        };
        this.fetchData = this.fetchData.bind(this);
    }
    /** 周期方法 */
    componentDidMount() {
        this.fetchData();
    }

    fetchData() {
        let dataUri = Properties['common']['bill_get_uri'];

        requestService.get(dataUri).then((responseData) => {
            this.setState({
                isRefreshing: false,
                loaded: true
            })
            if (responseData != null && responseData != undefined) {
                this.setState({
                    dataSource: this.state.dataSource.cloneWithRows(responseData),
                })
            }
        }).done();
    }

    _leftItemAction() {
        console.log('左侧按钮点击了');
    }

    _rightItemAction() {
        const { navigator } = this.props;
        //为什么这里可以取得 props.navigator?请看上文:
        //<Component {...route.params} navigator={navigator} />
        //这里传递了navigator作为props
        if (navigator) {
            navigator.push({
                name: 'BillCreate',
                component: BillCreate,
            })
        }
    }

    _pressButton() {

    }

    _getBillType(type) {

        switch (type) {
            case 1:
                return "餐饮";
            case 2:
                return "旅游";
            case 3:
                return "汽车";
            case 4:
                return "加油";
            case 5:
                return "数码";
            case 6:
                return "就医";    
            case 7:
                return "图书";
            case 8:
                return "消费";
            default:
                return "其他";
        }
    }
    render() {

        if (!this.state.loaded) {
            return this.renderLoadingView();
        }

        return (
            <View>
                <NavigationBar
                    title='账单列表'
                    leftItemTitle=''
                    rightItemTitle='添加'
                    rightTextColor='#3393F2'
                    leftTextColor='#3393F2'
                    leftItemFunc={this._leftItemAction.bind(this)}
                    rightItemFunc={this._rightItemAction.bind(this)} />



                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this.renderBill.bind(this)}
                    renderSeparator={this._renderSplite}
                    renderHeader={this._renderHeader}
                    initialListSize="20"
                    renderScrollComponent={(props) => <ScrollView refreshControl={<RefreshControl
                        refreshing={this.state.isRefreshing}
                        onRefresh={() => {
                            this.setState({
                                isRefreshing: true
                            });
                            this.fetchData();
                        }}
                        tintColor="#ff0000"
                        title="Loading..."
                        titleColor="#00ff00"
                        colors={['#ff0000', '#00ff00', '#0000ff']}
                        progressBackgroundColor="#ffff00"
                    />}></ScrollView>}
                />
            </View>
        );

    }


    renderLoadingView() {
        return (
            <View>
                <View>
                    <NavigationBar
                        title='账单列表'
                        leftItemTitle=''
                        rightItemTitle='按钮'
                        rightTextColor='#3393F2'
                        leftTextColor='#3393F2'
                        leftItemFunc={this._leftItemAction.bind(this)}
                        rightItemFunc={this._rightItemAction.bind(this)} />
                </View>
                <View style={styles.container}>
                    <Text>正在加载账单数据......</Text>
                </View>
            </View>
        );
    }

    renderBill(bill) {
        let a = bill.billType;
        let b = this._getBillType(a);

        return (
            <View style={styles.container} key={bill.id}>

                <View style={styles.rightContainer}>
                    <View style={styles.fixed_cell}>
                        <Text style={styles.content}>{bill.id}</Text>
                    </View>
                    <View style={styles.cell}>
                        <Text style={styles.content}>{bill.billName}</Text>
                    </View>
                    <View style={styles.cell}>
                        <Text style={styles.content}>{bill.billCost}</Text>
                    </View>
                    <View style={styles.cell}>
                        <Text style={styles.content}>
                            {b}
                        </Text>
                    </View>

                </View>
            </View>
        );
    }
    _renderSplite() {
        return (<View style={{ height: 0.8, backgroundColor: "#D4D4D4" }}></View>)
    }
    _renderHeader() {
        return (<View style={styles.container}>
            <View style={styles.rightContainer}>
                <View style={styles.fixed_cell}>
                    <Text style={styles.list_head}>编号</Text>
                </View>
                <View style={styles.cell}>
                    <Text style={styles.list_head}>名称</Text>
                </View>
                <View style={styles.cell}>
                    <Text style={styles.list_head}>金额</Text>
                </View>
                <View style={styles.cell}>
                    <Text style={styles.list_head}>类型</Text>
                </View>

            </View>
        </View>);
    }
}



var styles = StyleSheet.create({
    fixed_cell: {
        width: 40,
    },
    cell: {
        flex: 1,
    },
    container: {
        height: 40,
        flexDirection: 'row',
        justifyContent: 'center',
        backgroundColor: '#F5FCFF',
    },
    rightContainer: {
        flex: 1,
        flexDirection: 'row',
    },
    content: {
        height: 40,
        fontSize: 20,
        textAlign: 'center',
        backgroundColor: '#FFFAF0',
    },
    list_head: {
        height: 40,
        fontSize: 20,
        textAlign: 'center',
        backgroundColor: '#F4A460',
    }


});